<template>
  <div class="app-container">
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <div>
          <el-form :model="projectInputQuery" :inline="true" label-width="auto">
            <div class="form-row">
              <el-form-item label="项目类型:">
                <el-select
                  v-model="projectInputQuery.PType"
                  clearable
                  style="width: 177px"
                  placeholder="请选择项目类型"
                  @change="handleProjectTypeChange"
                >
                  <el-option label="传媒中心" value="传媒中心" />
                  <el-option label="仑传公司" value="仑传公司" />
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称:">
                <el-input
                  v-model="projectInputQuery.PName"
                  clearable
                  style="width: 177px"
                  placeholder="请输入项目名称"
                />
              </el-form-item>
              <el-form-item label="客户单位:">
                <!-- <el-select
                @change="handleCustomerChange"
                clearable
                v-model="projectInputQuery.customer"
                placeholder="请选择客户单位"
                style="width: 177px"
              >
                <el-option
                  :label="item.name"
                  :value="item.name"
                  v-for="item in customerUnits"
                  :key="item.id"
                ></el-option>
              </el-select> -->
                <el-input
                  v-model="projectInputQuery.customer"
                  style="width: 177px"
                  placeholder="请输入客户单位"
                />
              </el-form-item>
              <el-form-item label="客户类型:">
                <el-select
                  v-model="projectInputQuery.customerType"
                  clearable
                  style="width: 177px"
                  placeholder="请选择客户类型"
                  @change="handleCustomerTypeChange"
                >
                  <el-option
                    v-for="item in projectTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目领域:">
                <el-select
                  v-model="projectInputQuery.projectArea"
                  clearable
                  style="width: 177px"
                  placeholder="请选择项目领域"
                  @change="handleProjectAreaChange"
                >
                  <el-option
                    v-for="item in projectAreas"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="重点项目:">
                <el-select
                  v-model="projectInputQuery.isImportant"
                  clearable
                  style="width: 177px"
                  placeholder="请选择重点项目"
                  @change="handleImportantChange"
                >
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
              <el-form-item label="内容及要求:">
                <el-input
                  v-model="projectInputQuery.content"
                  clearable
                  style="width: 177px"
                  placeholder="请输入内容及要求"
                />
              </el-form-item>
              <el-form-item label="项目编号:">
                <el-input
                  v-model="projectInputQuery.no"
                  clearable
                  style="width: 177px"
                  placeholder="请输入项目编号"
                />
              </el-form-item>
              <el-form-item label="项目负责人:">
                <el-input
                  v-model="projectInputQuery.salesman"
                  clearable
                  style="width: 177px"
                  placeholder="请输入项目负责人"
                />
              </el-form-item>
              <el-form-item label="项目状态:">
                <el-select
                  v-model="projectInputQuery.status"
                  clearable
                  style="width: 177px"
                  placeholder="请选择单据状态"
                  @change="handleStatusChange"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="平台:">
                <el-select
                  v-model="projectInputQuery.platform"
                  clearable
                  style="width: 177px"
                  placeholder="请选择平台"
                  @change="handlePlatformChange"
                >
                  <el-option
                    v-for="item in selPlatformLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="部门:">
                <el-select
                  v-model="projectInputQuery.department"
                  clearable
                  style="width: 177px"
                  placeholder="请选择执行事业部"
                  @change="handleDepartmentChange"
                >
                  <el-option
                    v-for="item in selDepartmentLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="存量类型:">
                <el-select
                  v-model="projectInputQuery.stockType"
                  clearable
                  style="width: 177px"
                  placeholder="请选择存量类型"
                  @change="handleStockTypeChange"
                >
                  <el-option label="存量" value="存量" />
                  <el-option label="增量" value="增量" />
                </el-select>
              </el-form-item>
              <el-form-item label="属性:">
                <el-select
                  v-model="projectInputQuery.attribute"
                  clearable
                  style="width: 177px"
                  placeholder="请选择属性"
                  @change="handleAttributeChange"
                >
                  <el-option
                    v-for="item in selProjectTypeLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button icon="el-icon-refresh" @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>
    <el-card>
      <div>
        <!-- 顶部操作按钮 -->
        <div class="operation-container">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
            >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
            >新建</el-button
          >
          <el-button
            type="warning"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit"
            >修改</el-button
          >
          <el-button
            v-if="isAdministrators"
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete"
            >批量删除</el-button
          >
          <!-- <el-button
            type="primary"
            size="small"
            icon="el-icon-printer"
            @click="handlePrint"
            >预览打印</el-button
          > -->
          <!-- <el-button
            type="success"
            size="small"
            icon="el-icon-refresh-left"
            @click="handleReturn"
            >撤回</el-button
          > -->
          <el-button @click="downloadTemplate"> 合同模板下载 </el-button>

          <!-- <div style="float: right">
            <el-button type="primary" icon="el-icon-upload2"
              >导入/导出</el-button
            >
          </div> -->
          <!-- <el-button
            type="primary"
            size="small"
            icon="el-icon-printer"
            @click="handlePrint"
          >打印</el-button> -->
        </div>

        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="projectInputList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            label="序号"
            width="70"
            type="index"
            align="center"
          />
          <el-table-column
            prop="no"
            label="合同编号"
            width="120"
            align="center"
          />
          <el-table-column
            prop="pname"
            label="项目名称"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="customer"
            label="客户单位"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="money"
            label="合同金额(元)"
            width="120"
            align="center"
          />
          <el-table-column
            prop="salesman"
            label="项目负责人"
            width="120"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime || "") }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="项目状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="getProjectStatusType(scope.row.status)">{{
                getProjectStatus(scope.row.status)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleView(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row :gutter="10" style="margin-top: 20px" type="flex" justify="end">
        <el-pagination
          background
          :current-page="projectInputQuery.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="projectInputQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="dialogVisible" width="87%">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="ptype">
              <!-- <el-input
                v-model="formData.no"
                placeholder="请输入合同编号"
              ></el-input> -->
              <el-select
                v-model="formData.ptype"
                clearable
                placeholder="请选择项目类型"
                style="width: 100%"
              >
                <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option> -->
                <el-option label="传媒中心" value="传媒中心" />
                <el-option label="仑传公司" value="仑传公司" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目采购方式" prop="projectFrom">
              <!-- <el-input
                v-model="formData.pname"
                placeholder="请输入项目来源"
              ></el-input> -->
              <el-select
                v-model="formData.projectFrom"
                clearable
                placeholder="请选择项目采购方式"
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectFroms"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="no">
              <el-input
                v-model="formData.no"
                placeholder="请输入合同编号"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="pname">
              <el-input
                v-model="formData.pname"
                clearable
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户类型" prop="customerType">
              <el-select
                v-model="formData.customerType"
                clearable
                style="width: 100%"
                placeholder="请选择客户类型"
              >
                <el-option
                  v-for="item in projectTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单位" prop="customer">
              <!-- <el-select
                clearable
                v-model="formData.customer"
                placeholder="请选择客户单位"
                style="width: 100%"
              >
                <el-option
                  :label="item.name"
                  :value="item.name"
                  v-for="item in customerUnits"
                  :key="item.id"
                ></el-option>
              </el-select> -->
              <el-input
                v-model="formData.customer"
                style="width: 100%"
                placeholder="请输入客户单位"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额" prop="money">
              <el-input
                v-model.number="formData.money"
                style="width: 100%"
                placeholder="请输入金额"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行时间" prop="duration">
              <!-- <el-input
                v-model="formData.duration"
                clearable
                placeholder="请输入执行时间，如：2023-01-01至2023-12-31"
                style="width: 100%"
              /> -->
              <el-date-picker
                v-model="formData.duration"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
                @change="handleDurationChange"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目领域" prop="projectArea">
              <el-select
                v-model="formData.projectArea"
                clearable
                style="width: 100%"
                placeholder="请选择项目领域"
              >
                <el-option
                  v-for="item in projectAreas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存量类型" prop="stockType">
              <el-select
                v-model="formData.stockType"
                clearable
                style="width: 100%"
                placeholder="请选择存量类型"
              >
                <el-option label="存量" value="存量" />
                <el-option label="增量" value="增量" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="salesman">
              <el-input
                v-model="formData.salesman"
                clearable
                style="width: 100%"
                placeholder="请输入项目负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目奖励" prop="manageRate">
              <el-select
                ref="manageRateSelect"
                v-model="formData.manageRate"
                clearable
                filterable
                allow-create
                default-first-option
                style="width: 100%"
                placeholder="请选择项目奖励"
                :popper-append-to-body="false"
                @blur="(e) => handleManageRateBlur(e)"
                @change="(val) => handleManageRateChange(val)"
              >
                <el-option
                  v-for="item in manageRateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="内容及要求" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容及要求"
          />
        </el-form-item>
        <el-divider />
        <!-- 项目类型表格 -->
        <div class="project-type-section">
          <div class="section-title">项目类型</div>
          <el-table :data="formData.lppStr" border style="width: 100%">
            <el-table-column
              label="平台产品IP"
              prop="platform"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.platform"></el-input> -->
                <el-select
                  v-model="scope.row.platform"
                  placeholder="请选择平台"
                >
                  <el-option
                    v-for="item in selPlatformLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="执行事业部"
              prop="department"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.department"></el-input> -->
                <el-select
                  v-model="scope.row.department"
                  placeholder="请选择执行事业部"
                >
                  <el-option
                    v-for="item in selDepartmentLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="执行内容及要求"
              prop="content"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.content"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入执行内容及要求"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="属性"
              prop="attribute"
              align="center"
              width="width"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.attribute"></el-input> -->
                <el-select
                  v-model="scope.row.attribute"
                  placeholder="请选择属性"
                >
                  <el-option
                    v-for="item in selProjectTypeLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="金额"
              prop="money"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.money"
                  placeholder="请输入金额"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="成本"
              prop="estimatedCost"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入成本"
                  v-model.number="scope.row.estimatedCost"
                ></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="width" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="removeProjectType(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px">
            <el-button type="primary" size="small" @click="addProjectType"
              >添加项目类型</el-button
            >
          </div>
        </div>

        <!-- 项目类型表格后面添加 -->
        <div class="upload-section">
          <div class="section-title">合同电子版上传</div>
          <el-upload
            ref="upload"
            class="upload-box"
            drag
            :http-request="customUpload"
            :on-change="handleContractChange"
            :on-error="handleUploadError"
            :on-remove="handleRemove"
            :file-list="fileList"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传doc/docx文件</div> -->
          </el-upload>
        </div>

        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formData.remarks"
            clearable
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
      </div>
    </el-dialog>

    <!-- 查看详情弹框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="87%"
      title="查看详情"
      custom-class="full-height-dialog"
    >
      <!-- 添加 id="printArea" -->
      <div id="printArea" class="dialog-content-wrapper">
        <div class="collapse-header">
          <h3>北仑区传媒中心经营项目立项</h3>
        </div>
        <el-card>
          <div>
            <div class="detail-content">
              <div class="contract-no">合同编号：{{ projectDetail.no }}</div>
              <el-form label-width="100px" class="detail-form">
                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目类型">
                      <el-select
                        v-model="projectDetail.ptype"
                        disabled
                        placeholder="请选择项目类型"
                        style="width: 100%"
                      >
                        <el-option label="传媒中心" value="传媒中心" />
                        <el-option label="仑传公司" value="仑传公司" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目采购方式">
                      <el-select
                        v-model="projectDetail.projectFrom"
                        disabled
                        placeholder="请选择项目采购方式"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in projectFroms"
                          :key="item.id"
                          :label="item.name"
                          :value="item.name"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="合同编号">
                      <el-input
                        v-model="projectDetail.no"
                        placeholder="请输入合同编号"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <el-input
                        v-model="projectDetail.pname"
                        disabled
                        placeholder="请输入项目名称"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="客户类型">
                      <el-select
                        v-model="projectDetail.customerType"
                        disabled
                        style="width: 100%"
                        placeholder="请选择客户类型"
                      >
                        <el-option
                          v-for="item in projectTypes"
                          :key="item.id"
                          :label="item.name"
                          :value="item.name"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户单位">
                      <el-input
                        v-model="projectDetail.customer"
                        disabled
                        placeholder="请输入客户单位"
                        style="width: 100%"
                      />
                    </el-form-item>
                    <!-- <el-select
                        disabled
                        v-model="projectDetail.customer"
                        placeholder="请选择客户单位"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in customerUnits"
                          :key="item.id"
                          :label="item.name"
                          :value="item.name"
                        >
                        </el-option>
                      </el-select> -->
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="金额">
                      <el-input
                        v-model.number="projectDetail.money"
                        disabled
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="执行时间">
                      <el-input v-model="projectDetail.duration" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目领域">
                      <el-select
                        v-model="projectDetail.projectArea"
                        disabled
                        placeholder="请选择项目领域"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in projectAreas"
                          :key="item.id"
                          :label="item.name"
                          :value="item.name"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="存量类型">
                      <el-select
                        v-model="projectDetail.stockType"
                        disabled
                        placeholder="请选择存量类型"
                        style="width: 100%"
                      >
                        <el-option label="存量" value="存量" />
                        <el-option label="增量" value="增量" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目负责人">
                      <el-input
                        v-model="projectDetail.salesman"
                        disabled
                        placeholder="请输入项目负责人"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目奖励">
                      <el-input v-model="projectDetail.manageRate" disabled>
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="24">
                    <el-form-item label="内容及要求">
                      <el-input
                        v-model="projectDetail.content"
                        type="textarea"
                        :rows="4"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <!-- <div slot="header"></div> -->
          <div>
            <div class="project-type">
              <div class="type-title">项目类型</div>
              <el-table
                :header-cell-style="{ background: '#f5f7fa' }"
                :data="projectDetail.list || []"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="platform"
                  label="平台产品IP"
                  width="120"
                  align="center"
                />
                <el-table-column
                  prop="department"
                  label="执行事业部"
                  width="150"
                  align="center"
                />
                <el-table-column
                  prop="content"
                  label="执行内容及要求"
                  width="300"
                  align="center"
                />
                <el-table-column prop="attribute" label="属性" align="center" />
                <el-table-column prop="money" label="金额" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.money || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedCost"
                  label="成本"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.estimatedCost || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferCompany"
                  label="划转对象"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferCompany || "无" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferMoney"
                  label="划转金额"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferMoney || "0" }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="transferExplain" label="划转说明">
                  <template slot-scope="scope">
                    {{ scope.row.transferExplain || "0" }}
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <!-- <div slot="header"></div> -->
          <div style="border: 2px solid #ebeef5">
            <div class="contract-info">
              <div class="info-item">
                <div class="info-label">合同电子版</div>
                <div class="info-content">
                  <a
                    v-if="projectDetail.contractFile"
                    :href="projectDetail.contractFile"
                    class="download-link"
                    @click.prevent="
                      handleFileDownload(projectDetail.contractFile)
                    "
                  >
                    {{ getFileName(projectDetail.contractFile) }}(点击下载文件)
                  </a>
                  <div class="button-group">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleFileDownload(projectDetail.contractFile)"
                      >下载</el-button
                    >
                    <el-button size="small" @click="handlePreview"
                      >预览</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">负责人备注</div>
                <div class="info-content">
                  {{ projectDetail.remarks || "" }}
                </div>
              </div>
              <!-- <div class="info-item">
                <div class="info-label">法律顾问意见</div>
                <div class="info-content">
                  {{ projectDetail.msuggest || "" }}
                </div>
              </div> -->
              <!-- <div class="info-item">
                <div class="info-label">运营中心意见</div>
                <div class="info-content">
                  {{ projectDetail.centerSuggest || "" }}
                </div>
              </div> -->
            </div>
          </div>
        </el-card>
        <!-- </el-collapse-item>
        </el-collapse> -->
      </div>
      <!-- 时间线部分（始终显示） -->
      <el-card style="margin-top: 20px">
        <!-- <div slot="header"></div> -->
        <div>
          <div class="timeline-section">
            <el-timeline>
              <el-timeline-item
                :timestamp="formatCreateTime(projectDetail.createTime)"
                placement="top"
                type="primary"
              >
                <el-card>
                  <h4>负责人已填报</h4>
                  <p>操作人：{{ projectDetail.luser }}</p>
                </el-card>
                <!-- <div class="timeline-content">
              <div class="status-text">负责人已填报</div>
              <div class="operator-text">操作人：周永声</div>
            </div> -->
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-card>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button v-print="printObj" type="primary">打印</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="87%">
      <el-form
        ref="editFormRef"
        :model="selectionRow"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="ptype">
              <el-select
                v-model="selectionRow.ptype"
                placeholder="请选择项目类型"
                style="width: 100%"
              >
                <el-option label="传媒中心" value="传媒中心" />
                <el-option label="仑传公司" value="仑传公司" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目采购方式" prop="projectFrom">
              <el-select
                v-model="selectionRow.projectFrom"
                placeholder="请选择项目采购方式"
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectFroms"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="no">
              <el-input
                v-model="selectionRow.no"
                placeholder="请输入合同编号"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="pname" required>
              <el-input
                v-model="selectionRow.pname"
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户类型" prop="customerType" required>
              <el-select
                v-model="selectionRow.customerType"
                clearable
                style="width: 100%"
                placeholder="请选择客户类型"
              >
                <el-option
                  v-for="item in projectTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单位" prop="customer" required>
              <!-- <el-select
                v-model="selectionRow.customer"
                placeholder="请选择客户单位"
                style="width: 100%"
              >
                <el-option
                  v-for="item in customerUnits"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select> -->
              <el-input
                v-model="selectionRow.customer"
                placeholder="请输入客户单位"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额" prop="money">
              <el-input
                v-model.number="selectionRow.money"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行时间" prop="duration">
              <el-date-picker
                v-model="selectionRow.duration"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
                @change="handleEditDurationChange"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目领域" prop="projectArea">
              <el-select
                v-model="selectionRow.projectArea"
                placeholder="请选择项目领域"
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectAreas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存量类型" prop="stockType" required>
              <el-select
                v-model="selectionRow.stockType"
                placeholder="请选择存量类型"
                style="width: 100%"
              >
                <el-option label="存量" value="存量" />
                <el-option label="增量" value="增量" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="salesman" required>
              <el-input
                v-model="selectionRow.salesman"
                placeholder="请输入项目负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目奖励" prop="manageRate">
              <el-select
                ref="editManageRateSelect"
                v-model="selectionRow.manageRate"
                clearable
                filterable
                allow-create
                default-first-option
                style="width: 100%"
                placeholder="请选择项目奖励"
                :popper-append-to-body="false"
                @blur="(e) => handleEditManageRateBlur(e)"
                @change="(val) => handleEditManageRateChange(val)"
              >
                <el-option
                  v-for="item in manageRateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="内容及要求" prop="content" required>
          <el-input
            v-model="selectionRow.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容及要求"
          />
        </el-form-item>

        <!-- 项目类型表格 -->
        <div class="project-type-section">
          <div class="section-title">项目类型</div>
          <el-table :data="selectionRow.lppStr" border style="width: 100%">
            <el-table-column
              label="平台产品IP"
              prop="platform"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.platform"></el-input> -->
                <el-select
                  v-model="scope.row.platform"
                  placeholder="请选择平台"
                >
                  <el-option
                    v-for="item in selPlatformLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="执行事业部"
              prop="department"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.department"></el-input> -->
                <el-select
                  v-model="scope.row.department"
                  placeholder="请选择执行事业部"
                >
                  <el-option
                    v-for="item in selDepartmentLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="执行内容及要求"
              prop="content"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.content"
                  type="textarea"
                  :rows="4"
                />
              </template>
            </el-table-column>
            <el-table-column label="属性" prop="attribute" align="center">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.attribute"></el-input> -->
                <el-select
                  v-model="scope.row.attribute"
                  placeholder="请选择属性"
                >
                  <el-option
                    v-for="item in selProjectTypeLists"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="金额"
              prop="money"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.money"
                  placeholder="请输入金额"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="划转对象"
              prop="transferCompany"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.transferCompany"
                  placeholder="请输入划转对象"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="划转金额"
              prop="transferMoney"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.transferMoney"
                  placeholder="请输入划转金额"
                />
              </template>
            </el-table-column>

            <!-- <el-table-column
              label="成本"
              prop="estimatedCost"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入成本"
                  v-model.number="scope.row.estimatedCost"
                ></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="width" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="removeEditProjectType(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px">
            <el-button type="primary" size="small" @click="addEditProjectType"
              >添加项目类型</el-button
            >
          </div>
        </div>

        <!-- 修改合同电子版上传部分 -->
        <div class="contract-upload-section">
          <div class="section-title">合同电子版上传</div>
          <el-upload
            ref="editUpload"
            class="upload-box"
            drag
            :http-request="customEditUpload"
            :on-error="handleEditUploadError"
            :on-change="handleEditContractChange"
            :file-list="editFileList"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传doc/docx文件</div> -->
          </el-upload>
        </div>
          <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="selectionRow.remarks"
            clearable
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selProjectListApi,
  addProjectApi,
  updateProjectByIdApi,
  selProjectByIdApi,
  delProjectByIdsApi,
  selNewProjectNoApi,
} from "@/api/project-input";
import {
  selCustomerTypeListApi, // 客户类型列表查询
  selCustomerUnitListApi, // 客户单位列表查询
  selProjectFromListApi, // 项目来源列表查询
  selProjectAreaListApi, // 项目领域列表查询
  selPlatformListApi, // 平台产品列表查询
  selDepartmentListApi, // 执行事业部列表查询
  selProjectTypeListApi, // 项目类型列表查询
} from "@/api/basic-data";
import { uploadFileApi, selFileUrlApi, selTemplateApi } from "@/api/uploadFile";
import request from "@/utils/requestH2"; // 添加这行
import { mapGetters } from "vuex";
export default {
  name: "Create",
  data() {
    return {
      selectionRow: [],
      loading: false,
      // 项目录入列表
      projectInputList: [],
      tableData: [
        {
          id: 1,
          contractNo: "202502051",
          projectName: "宁波市北仑区妇女联合会年度合作协议（妇联）",
          customerUnit: "宁波市北仑区妇女联合会",
          contractAmount: 48000,
          projectManager: "周永声",
          createTime: "2025-02-05 10:56",
          status: "已通过",
        },
        {
          id: 2,
          contractNo: "202501221",
          projectName: "青田年统留守儿童北仑研学活动策划合作协议",
          customerUnit: "宁波北仑圆满旅行社有限责任公司",
          contractAmount: 4000,
          projectManager: "张佳丽",
          createTime: "2025-01-22 00:00",
          status: "已通过",
        },
        // 可以添加更多数据...
      ],
      isFilterVisible: false,
      detailVisible: false, // 查看详情
      // 项目录入查询参数
      projectInputQuery: {
        PType: "", // 项目类型
        page: 1,
        pageSize: 10,
        attribute: "", // 属性
        content: "", // 项目内容
        customer: "", // 客户
        customerType: "", // 客户类型
        department: "", // 部门
        isImportant: "", // 是否重要
        no: "", // 项目编号
        platform: "", // 平台
        PName: "", // 项目名称
        projectArea: "", // 项目领域
        salesman: "", // 项目负责人
        status: "", // 项目状态
        stockType: "", // 库存类型
        userId: this.$store.getters.userId, // 用户ID
      },
      dialogVisible: false,
      // 新增表单
      formData: {
        content: "", // 内容及要求
        contractFileUrl: "", // 合同文件url
        customer: "", // 客户单位
        customerType: "", // 客户类型
        duration: "", // 执行时间\
        // executionFee: "", // 执行费用
        lppStr: [
          // {
          //   // 项目与项目类型对象数组
          //   attribute: "", // 属性
          //   content: "", // 内容
          //   department: "", // 部门
          //   estimatedCost: "", // 预计成本
          //   money: "", // 金额
          //   platform: "", // 平台
          //   projectIP: "", // 项目IP
          //   projectNo: "", // 项目编号
          // },
        ],
        money: "", // 金额
        no: "", // 编号
        pname: "", // 项目名称
        ptype: "传媒中心", // 项目类型
        createName: this.$store.getters.userId, // 创建人
        salesman: "", // 项目负责人
        stockType: "", // 存量类型
        projectFrom: "", // 项目采购方式
        projectArea: "", // 项目领域
        manageRate: "0", // 管理费率
        operation: "", // 操作
        remarks: "", // 备注
      },
      // 单据状态
      statusOptions: [
        { label: "已驳回", value: -1 },
        // { label: "未提交", value: 0 },
        { label: "待审核", value: 1 },
        { label: "已通过", value: 2 },
      ],
      // 客户类型列表参数
      selCustomerTypeListQuery: {
        page: 1,
        pageSize: 99,
        name: "",
      },

      total: 0,
      projectTypes: [], // 客户类型列表
      customerUnits: [], // 客户单位列表
      projectFroms: [], // 项目来源列表
      projectAreas: [], // 项目领域列表
      rules: {
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        contractFile: [
          { required: true, message: "请上传合同文件", trigger: "change" },
        ],
        createName: [
          { required: true, message: "请输入创建人名称", trigger: "blur" },
        ],
        customer: [{ required: true, message: "请输入客户", trigger: "blur" }],
        // customerType: [
        //   { required: true, message: "请选择客户类型", trigger: "change" },
        // ],
        // duration: [
        //   { required: true, message: "请选择时间", trigger: "change" },
        // ],
        // executionFee: [
        //   { required: true, message: "请输入执行费用", trigger: "blur" },
        //   { type: "number", message: "执行费用必须为数字", trigger: "blur" },
        // ],
        // lppStr: [
        //   { required: true, message: "请添加项目类型", trigger: "change" },
        //   { type: "array", message: "项目类型必须为数组", trigger: "change" },
        // ],
        money: [
          { required: true, message: "请输入金额", trigger: "blur" },
          // { type: "number", message: "金额必须为数字", trigger: "blur" },
        ],
        // no: [
        //   { required: true, message: "请输入编号", trigger: "blur" },
        //   // { type: "integer", message: "编号必须为整数", trigger: "blur" },
        // ],
        pname: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        pType: [
          { required: true, message: "请选择项目类型", trigger: "change" },
          // { type: "integer", message: "项目类型必须为整数", trigger: "blur" },
        ],
        salesman: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
        // stockType: [
        //   { required: true, message: "请选择库存类型", trigger: "change" },
        // ],
      },
      detailDialogVisible: false,
      activeNames: [], // 默认不展开
      typeTableData: [
        {
          platformProduct: "*仓语",
          department: "新闻采访事业部",
          content:
            "围绕六一儿童节、儿童友好月、爱心妈妈等重大主题，通过各版块宣传策划3篇。",
          type: "",
          amount: "9000",
          directCost: "0",
          transferCompany: "无",
          transferAmount: "0",
          transferDesc: "0",
        },
        {
          platformProduct: "*策划传播",
          department: "新闻采访事业部",
          content: "以儿童友好为主题，形成3篇专题的宣传策划。",
          type: "执行类",
          amount: "15000",
          directCost: "0",
          transferCompany: "无",
          transferAmount: "0",
          transferDesc: "0",
        },
        {
          platformProduct: "*仓语",
          department: "优质内容事业部",
          content:
            "围绕六一儿童节、儿童友好月、爱心妈妈等重大主题，通过各版块宣传策划3篇。",
          type: "执行类",
          amount: "9000",
          directCost: "0",
          transferCompany: "无",
          transferAmount: "0",
          transferDesc: "0",
        },
        {
          platformProduct: "*活动",
          department: "文化创意专班",
          content: "共同策划执行2025年少儿春晚相关活动1场。",
          type: "执行类",
          amount: "15000",
          directCost: "0",
          transferCompany: "无",
          transferAmount: "0",
          transferDesc: "0",
        },
      ],
      projectDetail: {},
      isEdit: false,
      durationForSubmit: "",
      editdurationForSubmit: "",
      uploadUrl: process.env.VUE_APP_BASE_HOME_API + "/filePreview/uploadFile", // 上传地址
      fileList: [], // 文件列表
      editDialogVisible: false,
      id: null,
      // 修改表单
      selectionRow: {
        content: "", // 内容及要求
        contractFileUrl: "", // 合同文件url
        createName: this.$store.getters.userId, // 创建人
        customer: "", // 客户单位
        customerType: "", // 客户类型
        duration: "", // 执行时间
        // executionFee: "", // 执行费用
        lppStr: [
          {
            // 项目与项目类型对象数组
            attribute: "", // 属性
            content: "", // 内容
            department: "", // 部门
            // estimatedCost: "", // 预计成本
            money: "", // 金额
            platform: "", // 平台
            projectIP: "", // 项目IP
            projectNo: "", // 项目编号
          },
        ],
        money: "", // 金额
        no: "", // 编号
        pname: "", // 项目名称
        ptype: "", // 项目类型
        salesman: "", // 项目负责人
        stockType: "", // 存量类型
        projectFrom: "", // 项目采购方式
        projectArea: "", // 项目领域
        manageRate: "", // 管理费率
        operation: "", // 操作
        remarks: "", // 备注
      },
      no: "", // 项目编号
      selectedRow: [], // 当前选中的行
      // 修改表单数据
      editFormData: {
        ptype: "",
        projectFrom: "",
        no: "",
        pname: "",
        customerType: "",
        customer: "",
        money: 0,
        duration: "",
        projectArea: "",
        stockType: "",
        salesman: "",
        manageRate: "",
        content: "",
        lppStr: [],
        remarks: "",
      },
      manageRateOptions: [
        { label: "0%", value: "0" },
        { label: "30%", value: "30" },
      ],
      editFileList: [], // 修改弹框的文件列表
      selectionRowId: [], // 选中行的ID
      selPlatformLists: [], // 产品平台列表
      selProjectTypeLists: [], // 项目类型列表
      // 产品平台查询参数
      selPlatformListQuery: {
        page: 1,
        pageSize: 99,
        name: "",
      },
      tempInputValue: "", // 临时存储输入的值
      isMediaCenter: false, // 控制合同编号是否禁用
      editisMediaCenter: false, // 控制修改合同编号是否禁用
      templateFile: "", // 存储模板文件路径
      templateLoading: false, // 下载loading状态
      printObj: {
        id: "printArea",
        popTitle: "项目录入详情",
        preview: false,
        extraCss: "",
        beforeEntryIframe() {
          try {
            // 获取打印区域
            const printArea = document.getElementById("printArea");
            if (!printArea) return;

            // 添加更强制的边框样式
            const styleElement = document.createElement("style");
            styleElement.id = "print-style-temp";
            styleElement.textContent = `
              /* 整个表格添加边框 */
              #printArea .el-table {
                border: 1px solid #dcdfe6 !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
              }
              
              /* 特别强制的单元格边框样式 */
              #printArea .el-table th.el-table__cell,
              #printArea .el-table td.el-table__cell {
                border-top: 1px solid #dcdfe6 !important;
                border-right: 1px solid #dcdfe6 !important;
                border-bottom: 1px solid #dcdfe6 !important;
                border-left: 1px solid #dcdfe6 !important;
              }
              
              /* 确保表头背景色 */
              #printArea .el-table th.el-table__cell {
                background-color: #f5f7fa !important;
              }
              
              /* 移除干扰元素 */
              #printArea .el-table::before,
              #printArea .el-table::after,
              #printArea .el-table .el-table__fixed::before,
              #printArea .el-table .el-table__fixed::after {
                display: none !important;
              }
            `;
            document.head.appendChild(styleElement);

            // 处理表格宽度和列组
            const tableNode = printArea.querySelectorAll(
              ".el-table__header,.el-table__body"
            );
            tableNode.forEach((tableItem) => {
              tableItem.style.width = "100%";
              tableItem.style.borderCollapse = "collapse";
              tableItem.style.borderSpacing = "0";

              // 设置表格列宽比例
              const colgroup = tableItem.querySelector("colgroup");
              if (colgroup) {
                colgroup.innerHTML = "";

                const widths = [
                  "11.2%", // 150px -> 11.2%
                  "14.9%", // 200px -> 14.9%
                  "22.4%", // 300px -> 22.4%
                  "11.2%", // 150px -> 11.2%
                  "8.9%", // 120px -> 8.9%
                  "8.9%", // 120px -> 8.9%
                  "11.2%", // 150px -> 11.2%
                  "11.2%", // 150px -> 11.2%
                ];

                widths.forEach((width) => {
                  const col = document.createElement("col");
                  col.style.width = width;
                  colgroup.appendChild(col);
                });
              }
            });

            // 使用setTimeout确保在DOM完全渲染后执行
            setTimeout(() => {
              // 直接操作DOM，强制设置边框样式
              const tables = printArea.querySelectorAll(".el-table");
              tables.forEach((table) => {
                table.style.border = "1px solid #dcdfe6";
                table.style.borderCollapse = "collapse";
                table.style.borderSpacing = "0";

                // 处理所有单元格
                const cells = table.querySelectorAll(
                  "th.el-table__cell, td.el-table__cell"
                );
                cells.forEach((cell) => {
                  // 为每个边单独设置边框
                  cell.style.setProperty(
                    "border-top",
                    "1px solid #dcdfe6",
                    "important"
                  );
                  cell.style.setProperty(
                    "border-right",
                    "1px solid #dcdfe6",
                    "important"
                  );
                  cell.style.setProperty(
                    "border-bottom",
                    "1px solid #dcdfe6",
                    "important"
                  );
                  cell.style.setProperty(
                    "border-left",
                    "1px solid #dcdfe6",
                    "important"
                  );
                });

                // 表头单元格额外处理
                const headerCells = table.querySelectorAll("th.el-table__cell");
                headerCells.forEach((cell) => {
                  cell.style.setProperty(
                    "background-color",
                    "#f5f7fa",
                    "important"
                  );
                  // 确保内容不会覆盖边框
                  const cellContent = cell.querySelector(".cell");
                  if (cellContent) {
                    cellContent.style.padding = "5px";
                  }
                });
              });
            }, 200); // 增加延迟时间，确保DOM完全渲染
          } catch (error) {
            console.error("Error in beforeEntryIframe:", error);
          }
        },
        closeCallback(vue) {
          console.log("关闭了打印工具");
          // 移除临时样式
          const tempStyle = document.getElementById("print-style-temp");
          if (tempStyle) {
            tempStyle.parentNode.removeChild(tempStyle);
          }
        },
      },
    };
  },
  created() {
    this.selProjectList();
    this.selCustomerTypeList(); // 客户类型列表
    this.selCustomerUnitList(); // 客户单位列表
    this.selProjectFromList(); // 项目来源列表
    this.selProjectAreaList(); // 项目领域列表
    this.selPlatformList(); // 平台产品列表
    this.selDepartmentList(); // 执行事业部列表
    this.selProjectTypeList(); // 项目类型列表
    this.selTemplate(); // 获取模板
  },
  computed: {
    ...mapGetters(["isAdministrators", "userId"]),
  },
  methods: {
    // 客户单位改变
    handleCustomerChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 客户类型改变
    handleCustomerTypeChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 项目领域改变
    handleProjectAreaChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 存量类型改变
    handleStockTypeChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 平台改变
    handlePlatformChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 执行事业部改变
    handleDepartmentChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 属性改变
    handleAttributeChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 获取模板
    async selTemplate() {
      try {
        const res = await selTemplateApi();
        if (res.code === 1 && res.data) {
          this.templateFile = res.data.templateFile;
        }
      } catch (error) {
        console.error("获取模板失败:", error);
      }
    },
    // 下载模板
    async downloadTemplate() {
      if (!this.templateFile) {
        this.$message.warning("暂无可下载的模板");
        return;
      }

      this.templateLoading = true;
      try {
        // 从文件路径中提取文件名，并获取最后一个下划线后的部分
        const fileName = this.templateFile.split("_").pop();
        console.log(fileName);
        // 拼接完整的下载地址
        const baseUrl = "http://192.168.11.2:8081";
        const fullUrl = `${baseUrl}${this.templateFile}`;

        // 创建下载链接
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = fullUrl;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        this.$message.success("模板下载成功");
      } catch (error) {
        console.error("下载失败:", error);
        this.$message.error("模板下载失败");
      } finally {
        this.templateLoading = false;
      }
    },
    // 查询项目类型列表
    async selProjectTypeList() {
      const res = await selProjectTypeListApi(this.selPlatformListQuery);
      console.log(res);
      this.selProjectTypeLists = res.records;
      // this.total = res.total;
    },
    // 执行事业部列表
    async selDepartmentList() {
      const res = await selDepartmentListApi(this.selPlatformListQuery);
      console.log(res);
      this.selDepartmentLists = res.records;
      // this.total = res.total;
    },
    // 平台产品列表
    async selPlatformList() {
      const res = await selPlatformListApi(this.selPlatformListQuery);
      console.log(res);
      this.selPlatformLists = res.records;
      // this.total = res.total;
    },
    // 获取合同编号
    async selNewProjectNo() {
      const res = await selNewProjectNoApi();
      console.log(res);
      if (res.code === 1) {
        this.formData.no = res.data;
        this.formData.lppStr[0].projectNo = res.data;
        console.log(this.formData.lppStr[0].projectNo);
      } else {
        this.$message.error(res.msg);
      }
    },

    // 客户类型列表查询
    async selCustomerTypeList() {
      const res = await selCustomerTypeListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.projectTypes = res.records;
    },
    // 客户单位列表查询
    async selCustomerUnitList() {
      const res = await selCustomerUnitListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.customerUnits = res.records;
    },
    // 项目来源列表查询
    async selProjectFromList() {
      const res = await selProjectFromListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.projectFroms = res.records;
    },
    // 项目领域列表查询
    async selProjectAreaList() {
      const res = await selProjectAreaListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.projectAreas = res.records;
    },
    // 项目录入列表
    async selProjectList() {
      this.loading = true;
      try {
        const res = await selProjectListApi(this.projectInputQuery);
        console.log(res);
        this.projectInputList = res.records;
        this.total = res.total;
      } catch (error) {
        console.error("获取项目录入列表失败:", error);
        this.$message.error("获取项目录入列表失败");
      } finally {
        this.loading = false;
      }
    },
    // 单据状态改变
    handleStatusChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 重点项目改变
    handleImportantChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 搜索
    handleQuery() {
      this.projectInputQuery.page = 1;
      this.selProjectList();
    },
    // 重置查询参数
    resetQuery() {
      this.projectInputQuery = {
        page: 1,
        pageSize: 10,
        attribute: "",
        content: "",
        customer: "",
        customerType: "",
        department: "",
        isImportant: "",
        no: "",
        platform: "",
        pname: "",
        projectArea: "",
        salesman: "",
        status: 1,
        stockType: "",
        userId: this.$store.getters.userId, // 用户ID
      };
      this.selProjectList();
    },
    toggleSearch() {
      // 实现检索功能
      console.log("toggle search");
    },
    // 新建
    handleAdd() {
      this.selNewProjectNo(); // 在这里调用获取新项目编号
      this.dialogVisible = true;
    },
    // 删除
    handleDelete() {
      if (this.selectionRowId.length === 0) {
        this.$message.warning("请选择要删除的记录");
        return;
      }
      console.log(this.selectionRowId);
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delProjectByIdsApi(this.selectionRowId);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.selectionRowId = [];
            this.selProjectList();
          } else {
            this.$message.error(res.msg || "删除失败");
          }
        })
        .catch(() => {});
    },
    handlePrint() {
      if (this.selectionRow.length === 0) {
        this.$message.warning("请选择要打印的项目");
        return;
      }
      if (this.selectionRow.length > 1) {
        this.$message.warning("请选择单条记录打印");
        return;
      }
      // 打开详情弹窗
      this.handleView(this.selectionRow[0]);
    },
    handleReturn() {
      console.log("return");
    },
    // 查看详情
    handleView(row) {
      this.detailDialogVisible = true;
      this.projectDetail = row;
      console.log(this.projectDetail);
    },
    // 分页
    handleSizeChange(val) {
      this.projectInputQuery.pageSize = val;
      this.selProjectList();
    },
    // 分页
    handleCurrentChange(val) {
      this.projectInputQuery.page = val;
      this.selProjectList();
    },
    getStatusType(status) {
      const statusMap = {
        已通过: "success",
        审批中: "warning",
        已驳回: "danger",
      };
      return statusMap[status] || "info";
    },
    fetchData() {
      // 实现数据获取逻辑
      console.log("fetch data with", this.page);
    },
    // 添加项目类型
    addProjectType() {
      this.formData.lppStr.push({
        attribute: "",
        content: "",
        department: "",
        // estimatedCost: "",
        money: "",
        platform: "",
        projectIP: "",
        projectNo: this.formData.no,
      });
    },
    // 添加或编辑项目类型
    addEditProjectType() {
      this.selectionRow.lppStr.push({
        attribute: "",
        content: "",
        department: "",
        // estimatedCost: "",
        money: "",
        platform: "",
        projectIP: "",
        projectNo: this.selectionRow.no,
      });
    },
    // 删除项目类型
    removeProjectType(index) {
      console.log(index);
      this.formData.lppStr.splice(index, 1);
    },
    // 删除项目类型
    removeEditProjectType(index) {
      console.log(index);
      this.selectionRow.lppStr.splice(index, 1);
    },
    // 表单提交
    async handleSubmit() {
      // 检查项目采购方式是否为空
      if (!this.formData.projectFrom || this.formData.projectFrom === "") {
        // 如果为空，删除该字段，不传递给后端
        delete this.formData.projectFrom;
      }
      // 创建提交数据对象，处理 manageRate
      const submitData = {
        ...this.formData,
        createName: this.$store.getters.userId, // 创建人
        duration: this.durationForSubmit,
        // 确保 manageRate 是数字类型
        manageRate: this.formData.manageRate
          ? String(this.formData.manageRate).replace("%", "")
          : 0,
      };

      const res = await addProjectApi(submitData);
      console.log(res);
      if (res.code === 1) {
        this.$message.success("提交成功");
        this.selProjectList(); // 列表刷新
        // 新增表单
        this.formData = {
          content: "", // 内容及要求
          contractFileUrl: "", // 合同文件url
          customer: "", // 客户单位
          customerType: "", // 客户类型
          duration: "", // 执行时间
          // executionFee: 0, // 执行费用
          lppStr: [
            {
              // 项目与项目类型对象数组
              attribute: "", // 属性
              content: "", // 内容
              department: "", // 部门
              // estimatedCost: "", // 预计成本
              money: "", // 金额
              platform: "", // 平台
              projectIP: "", // 项目IP
              projectNo: "", // 项目编号
            },
          ],
          money: "", // 金额
          createName: this.$store.getters.userId, // 创建人
          no: "", // 编号
          pname: "", // 项目名称
          ptype: "", // 项目类型
          salesman: "", // 项目负责人
          stockType: "", // 存量类型
          projectFrom: "", // 项目采购方式
          projectArea: "", // 项目领域
          manageRate: "", // 管理费率
          operation: "", // 操作
          remarks: "", // 备注
        };
        this.dialogVisible = false;
      } else {
        this.$message.error(res.msg || "提交失败");
      }
    },
    // 执行时间处理
    handleDurationChange(val) {
      if (!val || val.length !== 2) return;
      console.log(val);
      // 格式化日期函数
      const formatDate = (date) => {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, "0");
        const day = String(d.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      };

      // 转换开始和结束时间用于提交
      const startDate = formatDate(val[0]);
      const endDate = formatDate(val[1]);

      // 存储格式化后的时间字符串，但不直接赋值给 duration
      this.durationForSubmit = `${startDate}至${endDate}`;
      console.log(this.durationForSubmit);
      // 保持原始时间值用于显示
      // this.formData.duration = val;
    },
    // 编辑表单的执行时间处理
    handleEditDurationChange(val) {
      if (!val || val.length !== 2) return;
      console.log(val);

      // 格式化日期函数
      const formatDate = (date) => {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, "0");
        const day = String(d.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      };
      console.log(val);
      // 转换开始和结束时间用于提交
      const startDate = formatDate(val[0]);
      const endDate = formatDate(val[1]);

      // 存储格式化后的时间字符串
      this.editdurationForSubmit = `${startDate}至${endDate}`;
      console.log(this.editdurationForSubmit);
    },

    // 格式化创建时间
    formatCreateTime(time) {
      if (!time) return "";
      // 找到第二个冒号的位置并截取字符串
      const secondColonIndex = time.indexOf(":", time.indexOf(":") + 1);
      return time.substring(0, secondColonIndex);
    },
    // 封装获取项目状态
    getProjectStatus(status) {
      if (status === null || status === undefined) return "";

      const statusNum = Number(status);
      if (statusNum >= 4) {
        return "已通过";
      } else if (statusNum === 1) {
        return "待审核";
      } else if (statusNum === -1) {
        return "已驳回";
      }
      return "";
    },
    // 封装获取项目状态类型
    getProjectStatusType(status) {
      if (status === null || status === undefined) return "";

      const statusNum = Number(status);
      if (statusNum >= 4) {
        return "success"; // 绿色
      } else if (statusNum === 1) {
        return "warning"; // 黄色
      } else if (statusNum === -1) {
        return "danger"; // 红色
      }
      return "info"; // 默认灰色
    },
    // 文件状态改变时的钩子
    handleContractChange(file, fileList) {
      this.fileList = fileList.slice(-1); // 只保留最新的一个文件
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
      const isDocx =
        file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
        file.type === "application/msword";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isDocx) {
        this.$message.error("上传文件只能是 doc/docx 格式!");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    // 项目类型改变
    handleProjectTypeChange(val) {
      console.log(val);
      this.selProjectList();
    },
    // 文件上传成功时的钩子
    // handleUploadSuccess(response, file, fileList) {
    //   console.log(response);
    //   if (response.code === 1) {
    //     this.$message.success("上传成功");
    //     // 可以保存文件信息到表单中
    //     this.formData.contractFileUrl = response.data; // 假设接口返回的是文件URL
    //     console.log(this.formData.contractFileUrl);
    //   } else {
    //     this.$message.error(response.msg || "上传失败");
    //     // 清除文件列表
    //     this.fileList = [];
    //     this.$refs.upload.clearFiles();
    //   }
    // },
    // 文件上传失败时的钩子
    handleUploadError(err) {
      this.$message.error("上传失败: " + err);
      // 清除文件列表
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    // 手动上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning("请先选择要上传的文件");
        return;
      }
      this.$refs.upload.submit();
    },
    // 移除文件
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 获取文件名
    getFileName(url) {
      if (!url) return "";
      // 截取_后面的部分作为文件名
      console.log(url.split("_").pop());
      return url.split("_").pop();
    },
    handleDownload() {
      if (this.projectDetail.contractFile) {
        window.open(this.projectDetail.contractFile);
      }
    },
    // 处理文件预览
    async handlePreview() {
      if (!this.projectDetail.contractFile) {
        this.$message.warning("文件链接不存在");
        return;
      }
      try {
        // 获取预览链接
        const res = await selFileUrlApi(this.projectDetail.contractFile);
        console.log(res);
        if (res.code === 1 && res.data) {
          // 在新窗口中打开预览链接
          window.open(res.data, "_blank");
        } else {
          this.$message.error(res.msg || "获取预览链接失败");
        }
      } catch (error) {
        console.error("预览失败:", error);
        this.$message.error("预览失败，请重试");
      }
    },
    // 处理文件下载
    handleFileDownload(url) {
      if (!url) {
        this.$message.warning("文件链接不存在");
        return;
      }

      // 拼接完整的下载地址
      // const baseUrl = "http://192.168.11.22:38085";
      const baseUrl = "http://192.168.11.2:8081";
      const fullUrl = `${baseUrl}${url}`;

      // 获取文件名 - 截取_后面的部分
      const fileName = url.split("_").pop();
      console.log(fullUrl);

      try {
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = fullUrl;
        link.setAttribute("download", fileName); // 使用新的文件名
        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);
      } catch (error) {
        console.error("下载失败:", error);
        this.$message.error("下载失败，请重试");
      }
    },
    // 提交修改
    async handleEditSubmit() {
      // 检查项目采购方式是否为空
      if (
        !this.selectionRow.projectFrom ||
        this.selectionRow.projectFrom === ""
      ) {
        // 如果为空，删除该字段，不传递给后端
        delete this.selectionRow.projectFrom;
      }
      try {
        await this.$refs.editFormRef.validate();

        // 处理提交数据
        const submitData = {
          content: this.selectionRow.content,
          // contractFile: this.selectionRow.contractFile,
          contractFileUrl: this.selectionRow.contractFileUrl,
          customer: this.selectionRow.customer,
          customerType: this.selectionRow.customerType,
          duration: this.editdurationForSubmit, // 处理后的duration
          // executionFee: Number(this.selectionRow.executionFee || 0),
          isImportant: this.selectionRow.isImportant || "0",
          lppStr: this.selectionRow.lppStr.map((item) => ({
            attribute: item.attribute || "",
            content: item.content || "",
            department: item.department || "",
            // estimatedCost: Number(item.estimatedCost || 0),
            money: Number(item.money || 0),
            platform: item.platform || "",
            projectIP: item.projectIP || "",
            projectNo: item.projectNo || "",
            transferCompany: item.transferCompany || "",
            transferMoney: Number(item.transferMoney || 0),
          })),
          money: Number(this.selectionRow.money || 0),
          no: this.selectionRow.no,
          pname: this.selectionRow.pname,
          ptype: this.selectionRow.ptype,
          salesman: this.selectionRow.salesman,
          stockType: this.selectionRow.stockType,
          projectFrom: this.selectionRow.projectFrom,
          projectArea: this.selectionRow.projectArea,
          manageRate: this.selectionRow.manageRate
            ? String(this.selectionRow.manageRate).replace("%", "")
            : 0,
          remarks: this.selectionRow.remarks,
        };

        const res = await updateProjectByIdApi(submitData, this.id);
        if (res.code === 1) {
          this.$message.success("修改成功");
          this.editDialogVisible = false;
          this.editFileList = [];
          this.selProjectList(); // 刷新列表
        } else {
          this.$message.error(res.msg || "修改失败");
        }
      } catch (error) {
        console.error("修改失败:", error);
        this.$message.error("表单验证失败，请检查必填项");
      }
    },
    // 表格选择改变时的回调
    handleSelectionChange(selection) {
      // 保存所有选中行的ID到数组
      this.selectionRowId = selection.map((row) => row.id);
      if (selection.list && Array.isArray(selection.list)) {
        selection.lppStr = selection.list.map((item) => ({
          platform: item.platform || "",
          department: item.department || "",
          content: item.content || "",
          attribute: item.attribute || "",
          money: Number(item.money || 0).toFixed(2),
          // estimatedCost: Number(item.estimatedCost || 0).toFixed(2),
          projectIP: item.projectIP || "",
          projectNo: item.projectNo || "",
        }));
      }

      // 保存所有选中的行
      this.selectedRow = selection;
      console.log(this.selectedRow);
    },
    // 清空选择
    clearSelection() {
      this.$refs.multipleTable.clearSelection();
      this.selectedRow = [];
    },
    // 点击修改按钮
    handleEdit() {
      console.log(this.selectedRow);

      if (this.selectedRow.length === 0) {
        this.$message.warning("请选择要修改的项目");
        return;
      }
      if (this.selectedRow.length > 1) {
        this.$message.warning("请选择单条项目");
        return;
      }
      this.no = this.selectedRow[0].no;
      // 深拷贝选中的数据
      const rowData = JSON.parse(JSON.stringify(this.selectedRow[0]));

      // 保存ID
      this.id = rowData.id; // 保存ID用于更新操作

      // 处理日期范围
      if (rowData.duration) {
        try {
          const [startDate, endDate] = rowData.duration.split("至");
          rowData.duration = [startDate, endDate];
          console.log(rowData.duration);
          // 格式化日期函数
          // const formatDate = (date) => {
          //   const d = new Date(date);
          //   const year = d.getFullYear();
          //   const month = String(d.getMonth() + 1).padStart(2, "0");
          //   const day = String(d.getDate()).padStart(2, "0");
          //   return `${year}-${month}-${day}`;
          // };
          // 转换开始和结束时间用于提交
          // const startDates = formatDate(rowData[0]);
          // const endDates = formatDate(rowData[1]);
          this.editdurationForSubmit = `${startDate}至${endDate}`;
          console.log(this.editdurationForSubmit);
        } catch (error) {
          console.error("日期格式转换失败:", error);
          rowData.duration = [];
        }
      }

      // 处理项目类型数组
      if (!Array.isArray(rowData.lppStr)) {
        rowData.lppStr = rowData.list || []; // 使用 list 字段，如果没有则使用空数组
      }

      // 赋值到表单数据
      this.selectionRow = {
        ...rowData,
        contractFileUrl: rowData.contractFile || "", // 合同文件URL
        ptype: rowData.ptype || "", // 项目类型
        projectFrom: rowData.projectFrom || "", // 项目采购方式
        customerType: rowData.customerType || "", // 客户类型
        customer: rowData.customer || "", // 客户
        money: rowData.money || 0, // 金额
        projectArea: rowData.projectArea || "", // 项目领域
        stockType: rowData.stockType || "", // 存量类型
        manageRate: String(rowData.manageRate) + "%", // 添加百分号
        lppStr: rowData.lppStr || [], // 项目类型数组
        content: rowData.content || "", // 内容及要求
        salesman: rowData.salesman || "", // 项目负责人
      };
      // 处理合同文件回显
      if (rowData.contractFile) {
        this.editFileList = [
          {
            name: rowData.contractFile.split("_").pop(), // 获取文件名
            url: rowData.contractFile,
          },
        ];
      } else {
        this.editFileList = [];
      }

      // 打开修改弹框
      this.editDialogVisible = true;
    },
    // 处理项目奖励变化
    handleManageRateChange(val) {
      if (val) {
        // 移除可能存在的百分号
        const value = String(val).replace(/%|\s/g, "");
        this.formData.manageRate = value;
      }
    },
    // 添加修改弹框的项目奖励处理方法
    handleEditManageRateBlur(e) {
      const inputValue = e.target.value;
      if (inputValue) {
        // 移除百分号和空格
        const value = String(inputValue).replace(/%|\s/g, "");

        if (!isNaN(value)) {
          // 创建新选项
          const newOption = {
            label: `${value}%`,
            value: value,
          };

          // 检查是否已存在该选项
          if (!this.manageRateOptions.some((item) => item.value === value)) {
            this.manageRateOptions.push(newOption);
          }

          // 设置选中值
          this.selectionRow.manageRate = value;
        }
      }
    },

    handleEditManageRateChange(val) {
      if (val) {
        // 移除百分号
        const value = String(val).replace(/%/g, "");
        this.selectionRow.manageRate = value;
      }
    },
    // 修改弹框的文件上传成功回调
    handleEditUploadSuccess(response, file) {
      if (response.code === 1) {
        this.$message.success("上传成功");
        this.selectionRow.contractFileUrl = response.data; // 保存文件路径
        this.editFileList = [
          {
            name: file.name,
            url: response.data,
          },
        ];
      } else {
        this.$message.error(response.msg || "上传失败");
      }
    },
    // 修改弹框的文件改变回调
    handleEditContractChange(file, fileList) {
      // 将fileList的最后一个元素赋值给this.editFileList
      this.editFileList = fileList.slice(-1);
    },
    // 上传前的验证
    beforeEditUpload(file) {
      const isDoc =
        file.type === "application/msword" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isDoc) {
        this.$message.error("只能上传doc/docx文件!");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("文件大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    // 上传错误处理
    // handleUploadError(err) {
    //   console.error("上传失败:", err);
    //   this.$message.error("文件上传失败，请重试");
    // },
    // 处理失去焦点
    handleManageRateBlur(e) {
      const inputValue = e.target.value;
      if (inputValue) {
        // 移除百分号和空格
        const value = String(inputValue).replace(/%|\s/g, "");

        if (!isNaN(value)) {
          // 创建新选项
          const newOption = {
            label: `${value}%`,
            value: value,
          };

          // 检查是否已存在该选项
          if (!this.manageRateOptions.some((item) => item.value === value)) {
            this.manageRateOptions.push(newOption);
          }

          // 设置选中值
          this.formData.manageRate = value;
        }
      }
    },

    // 处理选择改变
    handleManageRateChange(val) {
      if (val) {
        // 移除百分号
        const value = String(val).replace(/%/g, "");
        this.formData.manageRate = value;
      }
    },

    // 添加打印方法
    // handlePrintDetail() {
    //   try {
    //     window.jQuery("#printArea").print({
    //       title: "",
    //       stylesheet: null,
    //       deferred: window.jQuery.Deferred().done(function () {
    //         console.log("打印完成");
    //       }),
    //     });
    //   } catch (error) {
    //     console.error("打印失败:", error);
    //     this.$message.error("打印失败，请重试");
    //   }
    // },
    // 添加自定义上传方法
    async customUpload(options) {
      try {
        console.log(options);
        const formData = new FormData();
        formData.append("file", options.file);

        const response = await request({
          url: "/filePreview/uploadFile",
          method: "POST",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });
        if (response.code === 1) {
          // 上传成功
          this.$message.success("上传成功");
          this.formData.contractFileUrl = response.data;
          options.onSuccess(response.data);
        } else {
          // 上传失败
          this.$message.error(response.msg || "上传失败");
          options.onError(new Error(response.msg));
        }
      } catch (error) {
        options.onError(error);
        this.$message.error("上传失败");
      }
    },

    // 添加自定义上传方法
    async customEditUpload(options) {
      try {
        console.log(options);
        const formData = new FormData();
        formData.append("file", options.file);

        const response = await request({
          url: "/filePreview/uploadFile",
          method: "POST",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });
        if (response.code === 1) {
          // 上传成功
          this.$message.success("上传成功");
          this.selectionRow.contractFileUrl = response.data;
          options.onSuccess(response.data);
        } else {
          // 上传失败
          this.$message.error(response.msg || "上传失败");
          options.onError(new Error(response.msg));
        }
      } catch (error) {
        options.onError(error);
        this.$message.error("上传失败");
      }
    },
  },
  // 修改弹框的文件上传错误处理
  handleEditUploadError(error) {
    console.error("上传失败:", error);
    this.$message.error("文件上传失败，请重试");
  },
  watch: {
    "formData.ptype": {
      async handler(newVal) {
        if (newVal === "仑传公司") {
          this.isMediaCenter = true;
          this.formData.no = ""; // 清空合同编号
        } else {
          this.isMediaCenter = false;
          // 如果不是传媒中心，重新获取项目编号
          try {
            const res = await selNewProjectNoApi();
            if (res.code === 1) {
              this.formData.no = res.data; // 设置项目编号
              // this.formData.lppStr[0].projectNo = res.data;
            } else {
              this.$message.error(res.msg || "获取项目编号失败");
            }
          } catch (error) {
            console.error("获取项目编号失败:", error);
            this.$message.error("获取项目编号失败");
          }
        }
      },
      // immediate: true,
    },
    "selectionRow.ptype": {
      async handler(newVal) {
        if (newVal === "仑传公司") {
          this.editisMediaCenter = true;
          this.selectionRow.no = ""; // 清空合同编号
        } else {
          this.selectionRow.no = this.no;
        }
      },
      immediate: true,
    },
    // 监听新增表单的 no
    "formData.no": {
      handler(newVal) {
        // 当 no 为空时，清空所有 lppStr 中的 projectNo
        if (!newVal && this.formData.lppStr) {
          this.formData.lppStr.forEach((item) => {
            item.projectNo = "";
          });
        }
        // 当 no 有值时，同步更新所有 lppStr 中的 projectNo
        if (newVal && this.formData.lppStr) {
          this.formData.lppStr.forEach((item) => {
            item.projectNo = newVal;
          });
        }
      },
      immediate: true, // 立即执行一次
    },
    // 监听修改表单的 no
    "selectionRow.no": {
      handler(newVal) {
        // 当 no 为空时，清空所有 lppStr 中的 projectNo
        if (!newVal && this.selectionRow.lppStr) {
          this.selectionRow.lppStr.forEach((item) => {
            item.projectNo = "";
          });
        }
        // 当 no 有值时，同步更新所有 lppStr 中的 projectNo
        if (newVal && this.selectionRow.lppStr) {
          this.selectionRow.lppStr.forEach((item) => {
            item.projectNo = newVal;
          });
        }
      },
      immediate: true, // 立即执行一次
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.operation-container {
  margin-bottom: 20px;
}

.operation-container .el-button {
  margin-right: 10px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

:deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  color: #606266;
}

:deep(.el-form-item__content) {
  width: 180px;
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

/* 确保select的宽度也是180px */
:deep(.el-select .el-input) {
  width: 100%;
}

/* 重置 form-item 的样式 */
:deep(.el-form--inline .el-form-item) {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__label) {
  float: none;
  line-height: 1;
  padding: 0 8px 0 0;
}

:deep(.el-form-item__content) {
  margin-left: 0 !important;
  line-height: 1;
}

/* 按钮样式 */
.el-button {
  margin-left: 10px;
}

/* 输入框样式 */
:deep(.el-input__inner) {
  border-radius: 2px;
}

.project-type-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.dialog-footer {
  /* text-align: center; */
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-table .el-input) {
  width: 100%;
}

:deep(.el-table .el-select) {
  width: 100%;
}

.upload-section {
  margin: 20px 0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
  margin-bottom: 20px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.upload-box {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  background-color: #fafafa;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 180px;
}

:deep(.el-upload__text) {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}

:deep(.el-upload__text em) {
  color: #409eff;
  font-style: normal;
}

:deep(.el-upload__tip) {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

/* 备注文本域样式 */
:deep(.el-textarea__inner) {
  min-height: 80px;
}

.collapse-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #303133;

  .view-btn {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
}

// .timeline-section {
//   padding: 20px;
//   background: #fff;

//   :deep(.el-timeline) {
//     padding-left: 0;
//   }

//   :deep(.el-timeline-item__node--normal) {
//     left: 0;
//   }

//   :deep(.el-timeline-item__wrapper) {
//     padding-left: 25px;
//   }

//   :deep(.el-timeline-item__timestamp) {
//     color: #909399;
//     font-size: 14px;
//   }
// }

.timeline-content {
  .status-text {
    color: #303133;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .operator-text {
    color: #606266;
    font-size: 14px;
  }
}

.detail-content {
  background: #fff;
  // border: 2px solid #ebeef5;
  // margin-top: 20px;

  .contract-no {
    color: #1b86ee;
    font-size: 16px;
    margin: 20px;
  }
}

.detail-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__label) {
    background-color: #f5f7fa;
    padding: 12px;
    height: auto;
    line-height: 20px;
    border: 1px solid #ebeef5;
    border-left: none;
    border-right: 1px solid #ebeef5;
  }

  :deep(.el-form-item__content) {
    padding: 0;
    margin-left: 100px !important;

    .form-content {
      padding: 12px;
      line-height: 20px;
      min-height: 44px;
      display: flex;
      align-items: center;
      border: 1px solid #ebeef5;
      border-left: none;
      border-right: none;
    }
  }

  :deep(.el-col) {
    &:last-child {
      .form-content {
        border-right: none;
      }
    }
  }

  .content-text {
    line-height: 1.8;
    color: #303133;
    padding: 12px;
    border: 1px solid #ebeef5;
    border-left: none;
    border-right: none;
  }
}

// 内容及要求特殊处理
:deep(.el-form-item--content) {
  .el-form-item__content {
    border-top: 1px solid #ebeef5;
  }
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
}

.project-type {
  margin-top: 20px;

  .type-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  :deep(.el-table) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      padding: 8px 0;
      font-weight: normal;
    }

    td {
      padding: 8px;
      color: #606266;
    }

    &::before,
    &::after {
      background-color: #ebeef5;
    }

    .el-table__cell {
      border-color: #ebeef5;
    }
  }

  .contract-info {
    // margin-top: 40px;
    // border: 2px solid #ebeef5;
    border-radius: 4px;

    .info-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 120px;
        padding: 12px;
        background-color: #f5f7fa;
        color: #606266;
        font-size: 14px;
        border-right: 1px solid #ebeef5;
      }

      .info-content {
        flex: 1;
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        &:has(.download-link) {
          justify-content: space-between;
        }

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .button-group {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.contract-info {
  // margin-top: 40px;
  // border: 2px solid #ebeef5;
  border-radius: 4px;

  .info-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 120px;
      padding: 12px;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 14px;
      border-right: 1px solid #ebeef5;
    }

    .info-content {
      flex: 1;
      padding: 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      &:has(.download-link) {
        justify-content: space-between;
      }

      .download-link {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .button-group {
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

// 修改弹框header样式
// :deep(.el-dialog__header) {
//   padding: 20px;
//   border-bottom: 1px solid #ebeef5;
//   margin-right: 0;
// }

// // 修改弹框footer样式
// :deep(.el-dialog__footer) {
//   padding: 20px;
//   border-top: 1px solid #ebeef5;
//   background: #fff;
// }

// 隐藏外部滚动条
// .detail-dialog {
//   :deep(.el-dialog) {
//     margin: 0 !important;
//   }
// }

/* 添加禁用输入框的样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  color: #303133;
  background-color: #fff;
  border-color: #dcdfe6;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #303133;
  background-color: #fff;
  border-color: #dcdfe6;
}

.full-height-dialog {
  :deep(.el-dialog) {
    .el-dialog__header {
      background-color: #f5f5f5 !important; // 使用 !important 覆盖默认样式
      text-align: center;
      padding: 15px 20px;
      border-radius: 4px 4px 0 0; // 保持顶部圆角一致
    }
  }
}

.download-link {
  color: #409eff;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: #66b1ff;
    text-decoration: underline;
  }
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.contract-template {
  margin: 10px 0;
}

/* 添加打印样式 */
@media print {
  #printArea {
    width: 100% !important;

    .el-table {
      width: 100% !important;

      /* 表格容器样式 */
      .el-table__inner-wrapper,
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        width: 100% !important;
      }

      /* 表格主体样式 */
      .el-table__header,
      .el-table__body {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
      }

      /* 单元格样式 */
      .el-table__cell {
        border: 1px solid #dcdfe6 !important;
        padding: 8px !important;
      }

      /* 表头样式 */
      .el-table__header th {
        background-color: #f5f7fa !important;
        font-weight: bold !important;
      }
    }
  }

  /* 隐藏不需要打印的元素 */
  .el-button,
  .dialog-footer,
  .el-pagination {
    display: none !important;
  }
}
</style>
